<template>
	<up-popup :show="show" :round="10" closeable="true" @close="close">
		<view class="pay-password">
			<view class="top flex flex-col items-center justify-between">
				<view class="title">请输入支付密码</view>
			</view>

			<view class="inps">
				<input :password="true" class="inp" placeholder="输入支付密码" placeholder-class="place-inp" v-model="password" />
			</view>
		</view>

		<view class="tm-btn" @click="confirm">
			<text>确认</text>
		</view>
	</up-popup>
</template>

<script setup>
	import { ref, computed, watch, nextTick, defineProps, defineEmits } from 'vue';
	import { port, hint, loading, closeLoading } from '/service/port';
	import { onLoad, onShow } from '@dcloudio/uni-app';
	const props = defineProps({
		show: {
			type: Boolean,
			default: false
		}
	});
	const password = ref('');
	const emits = defineEmits(['update:show', 'confirm']);

	function close() {
		emits('update:show', false);
	}

	onShow(() => {
		password.value = '';
	});

	function confirm() {
		if (!password) {
			hint('请填写支付密码');
			return false;
		}
		emits('confirm', password.value);
		password.value = '';
	}
</script>

<style scoped lang="scss">
	.pay-password {
		padding: 30rpx;
		.top {
			padding-bottom: 50rpx;
			// border-bottom: 1rpx #eee solid;
			.title {
				font-weight: 500;
				font-size: 34rpx;
				color: #000000;
			}
			.desc {
				font-weight: 400;
				font-size: 24rpx;
				color: #777777;
				margin: 40rpx 0 14rpx 0;
			}
			.total {
				font-weight: 500;
				font-size: 58rpx;
				color: #000000;
			}
		}
		.middle {
			padding: 30rpx 0 44rpx 0;
			.pay_way {
				font-weight: 400;
				font-size: 26rpx;
				color: #666666;
			}
			.pay_way_value {
				font-weight: 400;
				font-size: 26rpx;
				color: #333333;
			}
		}
		.inps {
			.place-inp {
				font-weight: 400;
				font-size: 28rpx;
				color: #aaaaaa;
			}
			.inp {
				font-size: 28rpx;
				background: #f4f5f8;
				border-radius: 20rpx;
				padding: 25rpx;
			}
		}
	}
</style>
